<template>
    <div class="button">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="追溯矩阵" name="first">
                <el-table :data="tableData" border 
                :row-style="{ height: '50px' ,fontSize:'18px'}" :header-cell-style="{ fontSize: '18px', backgroundColor: '#D4E8FD', color: '#333' }">
                    <el-table-column label="能力" align="right" width="180">
                        <el-table-column prop="name" label="准备行动" width="180">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column v-for="(col, i) in columnList" :key="i" :prop="col.prop" :label="col.label"
                        align="center">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="关联矩阵" name="second">
                <el-table class="table" :data="tableData2" tooltip-effect="dark" style="width: 100%" fit
                    :row-style="{ height: '50px' }"
                    :header-cell-style="{ fontSize: '18px', backgroundColor: '#D4E8FD', color: '#333' }" border
                    :span-method="objectspan">
                    <el-table-column prop="name" label="能力" width="180" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="type" label="能力指标" width="460"></el-table-column>
                    <el-table-column prop="host" label="装备行动" width="380"></el-table-column>
                    <el-table-column prop="order" label="装备行动指标" width="480"></el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeName: "first",
            columnList: [
                {
                    prop: "t1",
                    label: "信息获取",
                },
                {
                    prop: "t2",
                    label: "信息合成",
                },
                {
                    prop: "t3",
                    label: "态势生成",
                },
                {
                    prop: "t4",
                    label: "作战管理",
                },
                {
                    prop: "t5",
                    label: "作站决策",
                },
                {
                    prop: "t6",
                    label: "数据运输",
                },
            ],
            tableData: [
                {
                    name: "xx预警机空中预警",
                    t1: "√",
                    t2: "√",
                    t3: "√",
                    t4: '√',
                    t5: "√",
                    t6: '√'
                },
                {
                    name: "xx预警机空中预警",
                    t1: "√",
                    t2: "√",
                    t3: "×",
                    t4: '√',
                    t5: "×",
                    t6: '√'
                }, {
                    name: "xx战斗机打击地面目标",
                    t1: "×",
                    t2: "×",
                    t3: "×",
                    t4: '×',
                    t5: "√",
                    t6: '√'
                },
                {
                    name: "xx战斗机打击地面目标",
                    t1: "√",
                    t2: "×",
                    t3: "√",
                    t4: '×',
                    t5: "√",
                    t6: '√'
                },
            ],
            tableData2: [
                {
                    name: "空中机动能力",
                    type: "5小时内完成机动距离1000km",
                    host: "xx运输机空中机动",
                    order: "xx运输机2小时内从A地机动到B地",
                },
                {
                    name: "陆上机动能力",
                    type: "12小时内完成机动距离1000km",
                    host: "xx装甲车陆路机动",
                    order: "xx装甲车8小时从A地机动到B地",
                },
                {
                    name: "海上机动能力",
                    type: "24小时内完成机动距离1000km",
                    host: "xx驱逐舰海上机动",
                    order: "xx驱逐舰8小时从A地机动到B地",
                },
                {
                    name: "太空侦察能力",
                    type: "覆盖范围1000km2，空间分辨率1m，探测手段：光学成像、雷达成像，时效性小于4小时",
                    host: "xx卫星变轨，加强对A区域探测的探测能力",
                    order: "xx卫星对A区域探测，空间分辨率1m，重放周期小于2小时，2小时内获得情报",
                },
                {
                    name: "空中侦察能力",
                    type: "覆盖范围1000km2，空间分辨率1m，探测手段：光学成像、雷达成像，时效性小于4小时",
                    host: "xx卫星变轨，加强对A区域探测的探测能力",
                    order: "xx卫星对A区域探测，空间分辨率1m，重放周期小于2小时，2小时内获得情报",
                },]
        }
    },
}
</script>

<style lang="less" scoped>
@import url("../font/detail.less");
</style>